
import styled from 'styled-components'
import React from 'react';
import DocumentTitle from 'react-document-title';
import { Button, Toast, WhiteSpace, WingBlank } from 'antd-mobile';

import { getNotices, getNoticesPvuv } from '@api/home'
import { useEffect, useState } from 'react';

import { getTime } from '@/utils'
import { useHistory, useParams } from 'react-router';

const NoticeStyle = styled.div`
  color: #474747;
    .title{
      font-size: .48rem;
      font-weight: bold;
      color: #474747;
    }

    .top{
      margin-top: .67rem;
      margin-bottom : .4rem;
      opacity: .5;
      .left{
        .time{
          margin-right: .41rem;
        }
      }
    }
    >hr{
      opacity: .5;
    }

    .content{
      margin-top: .37rem;
    }

    .bottom{
      position: absolute;
      margin-bottom: env(safe-area-inset-bottom);
      bottom: .4rem;
      width: calc( 100% - 30px );
    }
    .goback{
      color: #ff762e;
      font-size: .38rem;
    }
`


const Content = (props) => {
  const history = useHistory()
  const { data } = props

  return (
    <>
      <div className="flex-row">
        <h2 className="title"> {data.title} </h2>
        <div className="goback" onClick={() => { history.goBack() }}>返回</div>
      </div>

      <div className="top flex-row">
        <div className="left">
          <span className="time">
            {getTime(data.createtime)}
          </span>
        火蝶云
      </div>
        <div className="right">
          阅读：{data.read_num}
        </div>
      </div>

      <hr />

      <div className="content">
        <div className="text">
          <div dangerouslySetInnerHTML={{ __html: data.content }}></div>
        </div>
      </div>
    </>
  )
}


const Notice = (props) => {

  const params = useParams()
  const [notices, setnotices] = useState([])
  const [index, setindex] = useState(0)
  const [Pv, setPv] = useState(0)

  const { id } = params

  useEffect(() => {
    getNotices().then(res => {
      setnotices(res)
    })

    getNoticesPvuv(id).then(res => {
      setPv(res)
    })

    return () => {
      // cleanup
    }
  }, [])

  return (
    <>
      <DocumentTitle title={props.route.title} />
      <NoticeStyle>
        <WingBlank>
          <WhiteSpace />

          {notices[index] && <Content pv={Pv} data={notices[index]} />}

          <div className="bottom flex-row">
            <Button
              onClick={e => { forward(index) }}
              style={{
                backgroundColor: 'white',
                width: '4.53rem',
                height: '1.06rem',
                lineHeight: '1.06rem'
              }}
            >
              上一条
            </Button>

            <Button
              onClick={e => { next(index) }}
              style={{
                backgroundColor: '#ff752d',
                width: '4.53rem',
                height: '1.06rem',
                lineHeight: '1.06rem',
                color: 'white'
              }}
            >
              下一条
            </Button>

          </div>

        </WingBlank>
      </NoticeStyle>
    </>
  )

  function next(i) {
    console.log('下一条', i, index, notices.length)
    if (i < (notices.length - 1)) {
      setindex(i + 1)
    } else {
      Toast.info('最后一条', 1)
    }
  }

  function forward(i) {
    if (i !== 0) {
      setindex(i - 1)
    } else {
      Toast.info('第一条', 1)
    }
  }

}

export default Notice